<template>
    <div>
        <table class="table">
            <tr>
                <td>房型名称</td>
                <td><input type="text" v-model="dataa.houseTypeName"></td>
            </tr>

            <tr>
                <td>房型图片</td>
                <td>
                    <input type="file" @change="upload">
                    <img :src="'https://localhost:7189/'+dataa.houseTypeImg" width="60px" height="60px">
                </td>
            </tr>

            <tr>
                <td>房型面积</td>
                <td><input type="text" v-model="dataa.houseTypeArear"></td>
            </tr>

            <tr>
                <td>状态</td>
                <td>
                    <input type="radio" :value="1" v-model="dataa.houseTypeState">未发布
                    <input type="radio" :value="2" v-model="dataa.houseTypeState">已发布
                </td>
            </tr>

            <tr>
                <td></td>
                <td><input type="button" value="添加" @click="Add"></td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted,ref } from 'vue';
import { useRouter } from 'vue-router';
const roter = useRouter();

const dataa = ref({
  "houseTypeId": 0,
  "houseTypeName": "",
  "houseTypeImg": "",
  "houseTypeArear": 0,
  "houseTypeState": 0
})
const upload=(e:any)=>{
    let f = e.target.files[0];
    let fl = new FormData();
    fl.append("file",f);

    if(1*1024*1024 < f.size)
    {
        alert("图片太大");
        return;
    }
    axios.post("https://localhost:7189/api/Upload",fl).then((res)=>{
        dataa.value.houseTypeImg = res.data;
    })
}

const Add=()=>{
    axios.post("https://localhost:7189/api/HouseType/Add",dataa.value).then((res)=>{
        if(res.data == -1)
        {
            alert("房型名称已存在!");
            return;
        }
        if(res.data>0)
        {
            alert("添加成功");
            roter.push("/ShowType")
            return;
        }
        else
        {
            alert("添加失败")
        }
    })
}

</script>

<style scoped>

</style>
